<template>
  <div class="flex space-x-2 mb-2">
    <Button icon="far fa-plus" label="新增" class="p-button-primary p-button-sm" @click="toggle" />
    <OverlayPanel ref="op" :showCloseIcon="true">
      <InputText type="text" v-model="newValue" placeholder="字典类型" class="p-inputtext-sm !mr-2" />
      <Button
        icon="fas fa-check"
        label="确定"
        class="p-button-primary p-button-sm"
        @click="_addDictCategory"
      />
    </OverlayPanel>
  </div>
  <DataTable
    :value="categories"
    :resizableColumns="true"
    :paginator="true"
    :rows="10"
    columnResizeMode="fit"
    showGridlines
    responsiveLayout="scroll"
    class="p-datatable-sm"
  >
    <Column field="dcid" header="字典类型id"></Column>
    <Column field="name" header="类型名称"></Column>
    <Column header="操作">
      <template #body="props">
        <Button
          icon="far fa-trash-can"
          class="p-button-rounded p-button-danger p-button-outlined"
          @click="_deleteDictCategory(props.data.name, props.data.dcid)"
        />
      </template>
    </Column>
  </DataTable>
</template>

<script lang="ts">
export default defineComponent({
  name: 'DictCategoryManage'
})
</script>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { useToast } from 'primevue/usetoast'
import { useConfirm } from 'primevue/useconfirm'
import { getDictCategoryList, deleteDictCategory, addDictCategory } from '@/api/admin/dict'

import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import Button from 'primevue/button'
import OverlayPanel from 'primevue/overlaypanel'
import InputText from 'primevue/inputtext'

let toast = useToast()
let confirm = useConfirm()
const store = useStore()

const categories = ref<any[]>()
const op = ref()
const newValue = ref('')

function toggle(event: Event) {
  op.value.toggle(event)
}

function _addDictCategory() {
  if (newValue.value.trim() === '') {
    toast.add({ severity: 'error', summary: '提示', detail: '字典类型不能为空' })
    return
  }
  addDictCategory(newValue.value)
    .then(() => {
      toast.add({ severity: 'success', summary: '添加成功', detail: `成功添加${newValue.value}`, life: 3000 })
      newValue.value = ''
      _getDictCategoryList()
    })
    .catch(err => {
      toast.add({ severity: 'error', summary: '添加失败', detail: err.data.msg, life: 3000 })
    })
}

function _deleteDictCategory(category: string, dcid: number) {
  confirm.require({
    message: `删除字典类型可能会导致程序无法运行`,
    header: `删除${category}`,
    acceptLabel: '确定',
    rejectLabel: '取消',
    icon: 'far fa-bookmark-slash',
    acceptClass: 'p-button-danger',
    accept: () => {
      deleteDictCategory(dcid)
        .then(() => {
          toast.add({ severity: 'success', summary: '删除成功', detail: `已删除${category}`, life: 3000 })
          _getDictCategoryList()
        })
        .catch(err => {
          toast.add({ severity: 'error', summary: '删除失败', detail: err.data.msg, life: 3000 })
        })
    }
  })
}

function _getDictCategoryList() {
  getDictCategoryList()
    .then(res => {
      categories.value = res.data
      store.commit('setDictCategoryList', res.data)
    })
    .catch(err => {
      toast.add({ severity: 'error', summary: '获取字典类型列表失败', detail: err.data.msg, life: 3000 })
    })
}

_getDictCategoryList()
</script>